<template>
  <div class="container">
    <div class="head-nav">
      <div class="wallet">
        <img src="@/assets/images/icon-wallet.png" alt="" />
        {{ walletAddress | getWalletAddressHide }}
      </div>
      <!-- <van-popover
        v-model="showPopover"
        theme="dark"
        trigger="click"
        placement="bottom-end"
        :actions="actions"
        @select="handleLangSelect"
      >
        <template #reference>
          <div class="language">{{ firstToUpper(lang) }}</div>
        </template>
      </van-popover> -->
    </div>
    <div class="banner-view">
      <div class="title">GROKLONG</div>
      <div class="sub-title">Burning is coming soon</div>
      <div class="mint-btn" @click="navigate">
        <img src="@/assets/images/icon-1.png" alt="" />
        MINT
      </div>
    </div>
    <div class="main">
      <section>
        <div class="title">项目介绍：</div>
        <div class="min-title">GROKLONG- 点燃加密世界的火焰</div>
        <p style="color: #e89157">
          欢迎来到GROKLONG， 这里是创新之焰与加密领域的交汇之地
        </p>
        <p>
          项目概况：在不断变化的加密世界中，GROKLONG崭露头角
          正在重新定义BSC生态系统。它旨在成为加密领域的不朽传奇，
          开创去中心化金融(DeFi)的新时代。
        </p>
      </section>
      <section>
        <div class="sub-title">核心亮点：</div>
        <p>
          1.创新机制：底池通缩：每小时0.375%的速度自动通缩，燃烧
          代币，币价主动上涨9%。自主燃烧:共识者可自主燃烧代币，
          获取暴利分红，2%流入共识分红池，双倍出局。
        </p>
        <p>
          2.NFT：共识者每燃烧1万代币，获得一个NFT盲盒，象征对
          GROKLONG项目的贡献，也是未来生态系统分红和奖励的凭证。
        </p>
        <p>
          3.回流机制：0.5%回流底池，随交易增加，底池逐渐增厚，
          代币数量通缩，币价螺旋上涨，成为散户和钻石手的避风港。
        </p>
        <p>
          4.资金保障：上线即丢弃权限，流动性池直接送入黑洞持有的
          GROKLONG不断增值，永不归零。
        </p>
      </section>
    </div>
    <div class="token">
      <div class="title">Token：</div>
      <div class="token-view">
        <div class="token-item">
          <div class="label">Token Name：</div>
          <div class="value">GROKLONG</div>
        </div>
        <div class="token-item">
          <div class="label">Lssuance Quantity:</div>
          <div class="value">21000000</div>
        </div>
        <div class="token-item">
          <div class="label">Lssuance Blockchain:</div>
          <div class="value">BNB Smart Chain</div>
        </div>
        <div class="token-item column">
          <div class="label">Contract Address:</div>
          <div class="value">
            <p>{{ collection }}</p>
            <img
              class="icon-copy"
              @click="handleCopy"
              src="@/assets/images/icon-copy.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <div class="follow-us">
      <div class="title">Follow us:</div>
      <div class="follow-view">
        <img src="@/assets/images/icon-2.png" alt="" />
        <img src="@/assets/images/icon-3.png" alt="" />
      </div>
    </div>
    <binding-popup ref="binding" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import { walletAddressHide } from "@/utils";
import bindingPopup from "@/components/binding";
import { allLang } from "@/language/index";
import { collection } from "@/utils/web3";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "home",
  // eslint-disable-next-line vue/no-unused-components
  components: { bindingPopup },
  computed: {
    ...mapState({
      walletAddress: (state) => state.user.walletAddress,
      lang: (state) => state.system.lang,
    }),
  },
  filters: {
    getWalletAddressHide(val) {
      return walletAddressHide(val, 3, 5, 4);
    },
  },
  data() {
    return {
      showPopover: false,
      actions: this.handleLangData(),
      collection,
    };
  },
  async mounted() {
    // const isBinding = await this.$store.dispatch("user/getBinding");
    // if (!isBinding) {
    //   this.$refs.binding.open();
    // }
  },
  methods: {
    navigate() {
      this.$global.navigate({
        path: "/Mint",
        query: {
          address: this.$route.query?.address || "",
        },
      });
    },
    /**
     * 首字母大写
     * @param {*} val
     */
    firstToUpper(val) {
      return val.trim().toLowerCase().replace(val[0], val[0].toUpperCase());
    },
    /**
     * 复制
     */
    handleCopy() {
      this.$copyText(this.collection).then(
        () => {
          this.$toast.success("复制成功!");
        },
        () => {
          this.$toast.fail("复制失败!");
        }
      );
    },
    /**
     * 处理语言数据
     */
    handleLangData() {
      return allLang.map((item) => {
        return {
          text: this.$t(`language.${item}`) + ` / ${this.firstToUpper(item)}`,
          value: item,
        };
      });
    },
    /**
     * 语言切换
     */
    handleLangSelect({ value }) {
      this.$i18n.locale = value;
      this.$store.dispatch("system/set_lang", value);
      this.actions = this.handleLangData();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
.container {
  background-image: url("./../../assets/images/bg-home.png");
}
</style>
